import { useState } from 'react';

import { ListRatingDto } from '@/shared/interfaces/generated';
import { Button, ButtonVariants, Loader, Slider } from '@/shared/ui';
import { ModalPage } from '@/widgets/ModalPage';
import cn from 'classnames';

import { CompanyReview } from '../CompanyReview';
import cs from './CompanyReviewsList.module.scss';

export const CompanyReviewsList = ({ reviews, isLoading }: { reviews?: ListRatingDto; isLoading: boolean }) => {
  const [isOpen, setIsOpen] = useState(false);
  const [showAllReviews, setShowAllReviews] = useState(false);

  const displayedReviews = showAllReviews ? reviews?.ratings : reviews?.ratings.slice(0, 4);
  return (
    <>
      <div className={cs.block} style={{ alignItems: reviews?.ratings?.length ? 'center' : 'flex-start' }}>
        <div className={cs.head}>
          <div className={cs.title}>
            Отзывы {!!reviews?.ratings?.length && <span className={cs.sub_title}>{reviews?.ratings?.length}</span>}
          </div>
          {!!reviews?.ratings?.length && (
            <Button
              className={cn(cs.mobile, cs.all)}
              data-testid="button-show_all"
              onClick={() => setIsOpen(true)}
              variant={ButtonVariants.Link}
            >
              Все
            </Button>
          )}
        </div>
        {(!reviews || isLoading) && (
          <>
            <Loader borderRadius={32} height={170} />
            <Loader borderRadius={32} height={30} />
            <Loader borderRadius={32} height={30} />
          </>
        )}
        <div
          className={cn(cs.reviews, cs.desktop)}
          style={{ alignItems: reviews?.ratings?.length ? 'center' : 'flex-start' }}
        >
          {reviews?.ratings?.length ? (
            <>
              {displayedReviews?.map((review) => (
                <CompanyReview
                  courseImage={review.product.image}
                  courseTitle={review.product.title}
                  date={review.createdAt}
                  description={review?.comment as unknown as string}
                  isSlider={false}
                  key={review.id}
                  name={review?.name as unknown as string}
                  productId={review?.product.id}
                  rating={review.rate}
                />
              ))}
              {reviews.ratings.length > 4 && (
                <Button
                  className={cs.extend}
                  data-testid="button-extend_reviews"
                  onClick={() => setShowAllReviews(!showAllReviews)}
                  type="button"
                  variant={ButtonVariants.Link}
                >
                  <span>{!showAllReviews && 'Показать все'}</span>
                </Button>
              )}
            </>
          ) : (
            <p className={cs.noReviews}>Отзывов пока нет</p>
          )}
        </div>
        <div className={cn(reviews?.ratings?.length && cs.reviews_slides, cs.mobile)}>
          {reviews?.ratings?.length ? (
            <Slider
              isAdaptiveHeight={reviews.ratings.length > 1}
              isInfinite={false}
              slides={reviews?.ratings.slice(0, 3).map((review, index) => ({
                id: index,
                data: (
                  <CompanyReview
                    courseImage={review.product.image}
                    courseTitle={review.product.title}
                    date={review.createdAt}
                    description={review?.comment as unknown as string}
                    isSlider={false}
                    key={review.id}
                    name={review?.name as unknown as string}
                    productId={review?.product.id}
                    rating={review.rate}
                  />
                ),
              }))}
            />
          ) : (
            <p className={cs.noReviews}>Отзывов пока нет</p>
          )}
        </div>
      </div>
      <ModalPage handleClose={() => setIsOpen(false)} isMobile={false} isOpen={isOpen}>
        <div className={cs.block}>
          <div className={cs.head}>
            <div className={cn(cs.title, cs.modal_title)}>
              Отзывы{' '}
              {!!reviews?.ratings?.length && <span className={cs.modal_sub_title}>{reviews?.ratings?.length}</span>}
            </div>
          </div>
          <div className={cn(cs.reviews, cs.mobile)}>
            {reviews?.ratings.map((review) => (
              <CompanyReview
                courseImage={review.product.image}
                courseTitle={review.product.title}
                date={review.createdAt}
                description={review?.comment as unknown as string}
                key={review.id}
                name={review?.name as unknown as string}
                productId={review?.product.id}
                rating={review.rate}
              />
            ))}
          </div>
        </div>
      </ModalPage>
    </>
  );
};
